<template>
  <div class="fangjian-main">
    <div class="fangjian-item" v-for="(item,index) in fangjianData" :key="index">
      <div class="item-chart">
        <EchartPie :pieData="item.data" :pieColor="pieColor" :pieFormatter="'{c}%'" :pieRadius="pieRadius" :labelColor="labelColor" :labelFontsize="labelFontsize" :tooltipTrigger="tooltipTrigger"></EchartPie>
      </div>
      <div class="item-name">{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
import EchartPie from "@/components/EchartPie.vue";
import { request } from '@/api/request.js'
export default {
  name: 'ViewFangjian',
  data () {
    return {
      fangjianData: [],
      // 浅色系色彩--pieColor: ["#a7cec0","#24916c"]，深色系色彩--pieColor: ["#c5e1f0","#0ee3f6"]
      pieColor: ["#3f495b","#2f70af"],
      labelColor: "#ffffff",
      pieRadius:['70%', '80%'],
      baseLabelFontsize: 18,
      labelFontsize: 18,
      tooltipTrigger:"none"
    }
  },
  mounted() {
    this.getFangjian();
    // this.labelColor = this.$store.state.colors.pieLabelZiColor
  },
  methods: {
    getFangjian(){
      request({
        url: '/lvjufangjian',
        method: 'get'
      }).then(res=>{
        this.fangjianData = res.data;
      })
    }
  },
  components: {
    EchartPie
  },
  watch: {
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          if(this.$store.state.colors){
            this.pieColor = this.$store.state.colors.pieLabelColorFJ
            this.labelColor = this.$store.state.colors.pieLabelZiColor
            this.labelFontsize = this.baseLabelFontsize * parseFloat(this.$store.state.htmlScale);
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.fangjian-main{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0px solid red;
  .fangjian-item{
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .item-chart{
      width: 100%;
      height: 60%;
    box-sizing: border-box;
    border: 0px solid blue;
    }
    .item-name{
      width: 100%;
      flex: 1;
      color: @titleColor;
      text-align: center;
      font-family: siyuanFont;
      font-size: 1.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0px solid aqua;
    }
  }
}
</style>